<template>
    <div class="upload-container">
        <viewer style="display: inline-block" v-if="myPicture">
            <img :style="{ width: imgWidth+ 'px', height: imgHeight + 'px' }" :src="myPicture" />
        </viewer>
        <div class="img" style="width: 70px;, height: 70px; display: inline-block" @click="uploads">
            <i class="el-icon-plus avatar-uploader-icon"></i>
        </div>
        <el-input v-model="myPicture" placeholder="图片地址" :maxlength="512"/>
        <input type="file" id="uploads" ref="inputFile" style="position:absolute; clip:rect(0 0 0 0);"
               accept="image/png, image/jpeg, image/gif, image/jpg" @change="uploadImg($event, 1)">
        <!-- 剪裁组件弹窗 -->
        <el-dialog title="剪裁" :visible.sync="cropperModel" append-to-body :center="true" width="880px">
            <div style="width: 100%; height: 500px">
                <vue-cropper :autoCrop="autoCrop" :fixedBox="fixedBox" :fixed="fixed" :fixedNumber="fixedNumber" :img="img"
                             :autoCropWidth="autoCropWidth" :autoCropHeight="autoCropHeight"
                             :outputSize="outputSize" ref="cropper" centerBox mode="auto"/>
            </div>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" icon="el-icon-success" @click="onSubmit">提交</el-button>
                <el-button class="cancel-btn" @click="cropperModel=false" icon="el-icon-error">取消</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>

    import {VueCropper} from 'vue-cropper'
    import {uploadBase} from '@/api/upload'

    export default {
        name: 'UploadImage',
        components: {
            VueCropper
        },
        props: {
            autoCrop: {
                type: Boolean,
                default: false
            },
            fixedBox: {
                type: Boolean,
                default: false
            },
            fixed: {
                type: Boolean,
                default: false
            },
            fixedNumber: {
                type: Array,
                default: () => [1, 1]
            },
            autoCropWidth: {
                type: String,
                default: "80%"
            },
            iconTop: {
                type: String,
                default: "0"
            },
            iconLeft: {
                type: String,
                default: "0"
            },
            autoCropHeight: {
                type: String,
                default: "80%"
            },
            outputSize: {
                type: Number,
                default: 0.8
            },

            imgWidth: {
                type: String,
                default: "70"
            },
            imgHeight: {
                type: String,
                default: "70"
            },
            picture: {
                type: String,
                default: ""
            },
        },
        data() {
            return {
                tempUrl: '',
                myPicture: this.picture,
                cropperModel: false,
                dataObj: {token: '', key: ''},
                img: ''
            }
        },
        model: {
            prop: 'picture',
            event: 'uploadCall'
        },
        watch: {
            picture: function (newVal, oldVal) {
                this.myPicture = newVal;
            },
            myPicture: function (newVal, oldVal) {
                this.$emit('uploadCall', newVal)
            },
        },
        mounted() {
            console.log(this.myPicture)

        },
        methods: {
            uploads() {
                this.$refs.inputFile.dispatchEvent(new MouseEvent('click'))
            },
            uploadImg(e, l) {
                this.cropperModel = true
                setTimeout(() => {
                    var filePath = e.target.files[0];
                    var reader = new FileReader();
                    let that = this;
                    reader.readAsDataURL(filePath);
                    reader.onload = function (e) {
                        that.img = this.result
                    }
                    that.$refs.inputFile.value = ''
                }, 0);
            },
            onSubmit() {
                this.$refs.cropper.getCropData(data => {
                    uploadBase({
                        base64Data: data
                    }).then(res => {
                        this.myPicture = res.data.urls
                    })

                    this.cropperModel = false;
                })
            }
        }
    }
</script>

<style lang="scss" scoped>
    @import "~@/styles/mixin.scss";

    .upload-container .img {
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
    }
</style>
